/**
* 描述：企业注册页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  @import 'src/styles/company/common';
  @import 'src/styles/common';
  @import 'src/styles/icons';
  @import 'src/styles/company/index';
  .fade-enter-active {
    transition: all .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: rotate( -70deg ) translateX( 300px );
  }
  .avatar-uploader{
    width:70px;
    height: 70px;
    border-radius: 70px;
    background: #f9f9f9;
    padding: 11px 18px;
    margin-left: 30px;
    float: left;
    margin-right:50px;
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .tips{
    float: left;
    color: #999999;
  }
  .changeBtn{
    width: 330px;height: 50px;font-size: 18px;text-align: center;margin:0 auto;display: block;
  }
  .zc-comLogoUpload{
    width: 70px;
    height: 70px;
    margin:0;
    -moz-border-radius: 70px; /* Firefox */
    -webkit-border-radius: 70px; /* Safari 和 Chrome */
    border-radius: 70px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    behavior: url('/static/style/ie-css3.htc'); /* 通知IE浏览器调用脚本作用于'box'类 */
  }
</style>
<template>
  <div class="main-login" style="overflow-y: auto;">
    <div class="l-login-headerTop">
      <div class="l-inner clearfix">
        <div class="logo fl">
          <img src="/static/images/web/company/wzlogo.png" width="70" height="78" alt="微职">
          <i class="name">微职-最贴心的校园招聘平台</i>
          <div class="clear"></div>
        </div>
        <div class="fr" style="margin-top:32px;">
            <span class="fl">
              <i class="iconCom iconCom_index02"></i>
              <i class="font">政府合作</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
              <i class="iconCom iconCom_index01"></i>
              <i class="font">城市代理</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index03"></i>
                <i class="font">手机微职</i>
                <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index04"></i>
                <i class="font">企业服务</i>
                <div class="clear"></div>
            </span>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <!--完善个人信息-->
    <div class="registerForm cccShadow" v-if="step == 2" style="padding: 20px 130px 20px;">
      <div class="register-step">
        <div class="title" style="display: block;float: left">创建个人信息</div>
        <div class="pop">必填</div>
        <div class="clear"></div>
        <el-form ref="formData" :model="formDataPerfect" label-width="0" :rules="rules" @keydown.enter="register()">
          <el-form-item label="" prop="phone" style="width:200px;float:left;margin-right:20px;">
            <el-input type="text" v-model="formDataPerfect.phone" placeholder="真实姓名"></el-input>
          </el-form-item>
          <div class="sexCahnge">
            <span class="cur">男</span>
            <span>女</span>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
          <el-form-item label="" prop="name" style="width:200px;float:left;margin-right:20px;">
            <el-select placeholder="出生年份" v-model="formDataPerfect.year" clearable>
              <el-option :value="1991"></el-option>
              <el-option :value="1992"></el-option>
              <el-option :value="1993"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:200px;float:left;margin-right:20px;">
            <el-input type="text" v-model="formDataPerfect.phone" placeholder="所在城市"></el-input>
          </el-form-item>
          <div class="clear"></div>
          <el-form-item style="width:420px;float:left;margin-right:20px;">
            <el-input type="text" v-model="formDataPerfect.phone" placeholder="请输入常用邮箱"></el-input>
          </el-form-item>
          <div class="clear"></div>
        </el-form>
        <Button type="primary" class="changeBtn" @click="register()" style="width:200px;float: left;background: #0078ff;">创建</Button>
        <div class="clear"></div>
        <img src="/static/images/web/reg.png" width="331" height="155">
      </div>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex';
  import { register, sendSmsCode } from '@/service/web/login/loginService';
  export default {
    data () {
      return {
        step: 2,
        isRemember: false,
        showLogin: false,
        phoneFunLoading: false, // 验证码loading
        formData: {},
        formDataPerfect: {},
        picture: null,
        code: '',
        captcha: '',
        isSend: false, // 是否已发送短信验证码
        fonts: '获取短信验证码',
        timeInterval: null, // 获取短信时间倒计时
        second: 60,
        rules: {
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {pattern: '^(1[3,4,5,6,7,8])\\d{9}$', message: '手机号格式不对', trigger: 'blur change'}
          ],
          name: [
            {required: true, message: '昵称不能为空！', trigger: 'blur change'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur change'},
            {pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$', message: '密码6-20位，必须同时含有数字、字母', trigger: 'blur change'}
          ],
          smsCode: [
            {required: true, message: '手机验证码不能为空！', trigger: 'blur change'}
          ]
        }
      };
    },
    computed: {
      transition () {
        let transitions = ['slideDown', 'zoomDown', 'bounceDown'];
        let index = this.getRandom(0, transitions.length - 1);
        return transitions[index];
      }
    },
    mounted () {
      this.showLogin = true;
      this.init();
    },
    methods: {
      ...mapMutations([
        'LOGIN_IN',
        'USER_INFO'
      ]),
      getRandom (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      init () {
        this.rndNum();
      },
      //
      // 生成随机数 5位 即 随机生成图片
      rndNum () {
        let xxx = Math.random().toString(36).substr(2);
        let aa = xxx.slice(0, 5);
        this.code = aa;
      },
      // 发送短信验证码
      async getSms () {
        try {
          if (!this.formData.phone) {
            this.$message({
              message: '请输入用户名',
              type: 'warning'
            });
            return;
          }
          if (!this.captcha) {
            this.$message({
              message: '请输入图片验证码',
              type: 'warning'
            });
            return;
          }
          this.phoneFunLoading = true;
          await sendSmsCode({phone: this.formData.phone}, {phone: this.formData.phone, randKey: this.code, captcha: this.captcha}); // 获取短信验证码接口
          this.isSend = true;
          this.second = 60;
          this.$message({
            message: '发送成功，请注意查收短信！',
            type: 'success'
          });
          this.timeInterval = setInterval(() => {
            if (this.second === 0) {
              this.fonts = '重新发送';
              this.phoneFunLoading = false;
              clearInterval(this.timeInterval);
              this.rndNum();
              this.code = '';
            } else {
              console.log(this.second);
              this.fonts = '剩余' + this.second + '秒';
              this.second = this.second - 1;
            }
          }, 1000);
        } catch (e) {
          this.phoneFunLoading = false;
          this.$message({
            message: e,
            type: 'error'
          });
        }
      },
      // 注册
      async register () {
        try {
          if (!this.formData.phone) {
            this.$message({
              message: '请输入用户名',
              type: 'warning'
            });
            return;
          }
          if (!this.formData.password) {
            this.$message({
              message: '请输入密码',
              type: 'warning'
            });
            return;
          }
          let formData = this._hyTool.deepCopy(this.formData);
//              formData.password = md5(formData.password);
          let result = await register(formData);
          this._hyTool.setCookie('user', JSON.stringify(this.formData));
          console.log('用户：' + result.name);
          this.$message({
            message: '注册成功，请您重新登录',
            type: 'success'
          });
          let redirect = this.$route.query.redirect || '/login';
          this.$router.push(redirect);
        } catch (e) {
          this.$message({
            message: e,
            type: 'error'
          });
        }
      }
    },
    watch: {
    },
    destoryed: function () {
      clearInterval(this.timeInterval);
    }
  };
</script>
